<template>
  <el-row :gutter="20">
    <el-col :span="18">
      <el-card class="mainContainer" shadow="never">

        <el-scrollbar height="calc(100vh - 220px)" style="display: flex;justify-content: center;align-items: center">
          <img :src=qrCodeUrl alt="你这个配置，搞不出来呀！！换个配置呢？">
        </el-scrollbar>

        <div style="display: flex;margin-top: 20px;justify-content: flex-end">
          <el-button type="primary" @click="copyData(qrCodeId)">复制当前ID</el-button>
          <el-button type="primary" @click="openNewLabel">新标签页中打开二维码</el-button>
          <el-dropdown style="margin-left: 10px" @command="handleCommand">
            <el-button type="primary">下载二维码</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="png">png 格式</el-dropdown-item>
                <el-dropdown-item command="jpg">jpg 格式</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

      </el-card>
    </el-col>


    <el-col :span="6">
      <el-card class="mainContainer" shadow="never">

        <el-scrollbar height="calc(100vh - 220px)">
          <el-form label-width="100" labelPosition="top"
                   :model="qrCodeMakeArgs">
            <el-form-item label="内容:">
              <el-input type="textarea"
                        maxlength="10000"
                        show-word-limit
                        v-model="qrCodeMakeArgs.content">
              </el-input>
            </el-form-item>
            <el-form-item label="是否微小型二维码:">
              <el-select v-model="qrCodeMakeArgs.micro" clearable
                         style="width: 100%">
                <el-option label="是" :value="true"/>
                <el-option label="否" :value="false"/>
              </el-select>
            </el-form-item>
            <el-form-item label="版本:">
              <el-select v-model="qrCodeMakeArgs.version" clearable
                         filterable
                         style="width: 100%">
                <el-option v-for="item in versionOptions"
                           :key="item"
                           :label="item" :value="item"/>
              </el-select>
            </el-form-item>
            <el-form-item label="纠错能力:">
              <el-select v-model="qrCodeMakeArgs.error" clearable
                         style="width: 100%">
                <el-option v-for="item in errorOptions"
                           :key="item"
                           :label="item" :value="item"/>
              </el-select>
            </el-form-item>
          </el-form>

          <el-form label-width="100" labelPosition="top"
                   :model="qrCodeKwArgs">
            <el-form-item label="缩放倍数:">
              <el-input-number
                  :min="1"
                  :max="700"
                  v-model="qrCodeKwArgs.scale"
                  style="width: 100%">
              </el-input-number>
            </el-form-item>
            <el-form-item label="边框宽度:">
              <el-input-number
                  :min="0"
                  v-model="qrCodeKwArgs.border"
                  style="width: 100%">
              </el-input-number>
            </el-form-item>
            <el-form-item label="前景色:">
              <el-color-picker v-model="qrCodeKwArgs.dark"/>
            </el-form-item>
            <el-form-item label="背景色:">
              <el-color-picker v-model="qrCodeKwArgs.light"/>
            </el-form-item>
            <el-form-item label="前景色对齐模式的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.alignment_dark"/>
            </el-form-item>
            <el-form-item label="背景色对齐模式的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.alignment_light"/>
            </el-form-item>
            <el-form-item label="某一个前景的点颜色:">
              <el-color-picker v-model="qrCodeKwArgs.dark_module"/>
            </el-form-item>
            <el-form-item label="数据模块的前景颜色:">
              <el-color-picker v-model="qrCodeKwArgs.data_dark"/>
            </el-form-item>
            <el-form-item label="数据模块的背景颜色:">
              <el-color-picker v-model="qrCodeKwArgs.data_light"/>
            </el-form-item>
            <el-form-item label="定位区暗模块的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.finder_dark"/>
            </el-form-item>
            <el-form-item label="定位区亮模块的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.finder_light"/>
            </el-form-item>
            <el-form-item label="格式信息区的暗模块的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.format_dark"/>
            </el-form-item>
            <el-form-item label="格式信息区的亮模块的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.format_light"/>
            </el-form-item>
            <el-form-item label="静区(边框)的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.quiet_zone"/>
            </el-form-item>
            <el-form-item label="分隔区的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.separator"/>
            </el-form-item>
            <el-form-item label="计时区的暗模块的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.timing_dark"/>
            </el-form-item>
            <el-form-item label="计时区亮模块的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.timing_light"/>
            </el-form-item>
            <el-form-item label="版本信息区的暗模块的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.version_dark"/>
            </el-form-item>
            <el-form-item label="版本信息区亮模块的颜色:">
              <el-color-picker v-model="qrCodeKwArgs.version_light"/>
            </el-form-item>
          </el-form>

          <!--
                  timing_dark	计时区的暗模块的颜色
                  timing_light	计时区亮模块的颜色
                  version_dark	版本信息区的暗模块的颜色(微二维码和低于版本7的二维码不携带任何版本信息)
                  version_light	版本信息区亮模块的颜色-->
        </el-scrollbar>

        <div style="display: flex;margin-top: 20px;justify-content: flex-end">
          <el-button type="primary" @click="generationQrCode">生成二维码</el-button>
        </div>

      </el-card>
    </el-col>

  </el-row>

</template>

<script setup>

import {reactive, ref, watch, watchEffect} from "vue";
import {getQrCodeDownload, postQrCode} from "@/apis/makeQr/index.js";
import {useClipboard} from "@vueuse/core";
import {ElMessage} from "element-plus";

let qrCodeUrl = ref(import.meta.env.VITE_APP_API + '/api/MakeQr/qrCode/19e7bcb4-ebfc-460f-9e45-dc45a0cdb32c/')
let qrCodeId = ref("19e7bcb4-ebfc-460f-9e45-dc45a0cdb32c")

const openNewLabel = () => {
  window.open(qrCodeUrl.value)
}
const qrCodeMakeArgs = reactive({content: 'hello!!', micro: false})
const qrCodeKwArgs = reactive({scale: 15, border: 1, dark: "#000000", light: "#ffffff"})

const versionAndErrorOptions = {
  M1: {L: 20},
  M2: {L: 40, M: 32},
  M3: {L: 84, M: 68},
  M4: {L: 128, M: 112, Q: 80},
  1: {L: 152, M: 128, Q: 104, H: 72},
  2: {L: 272, M: 224, Q: 176, H: 128},
  3: {L: 440, M: 352, Q: 272, H: 208},
  4: {L: 640, M: 512, Q: 384, H: 288},
  5: {L: 864, M: 688, Q: 496, H: 368},
  6: {L: 1088, M: 864, Q: 608, H: 480},
  7: {L: 1248, M: 992, Q: 704, H: 528},
  8: {L: 1552, M: 1232, Q: 880, H: 688},
  9: {L: 1856, M: 1456, Q: 1056, H: 800},
  10: {L: 2192, M: 1728, Q: 1232, H: 976},
  11: {L: 2592, M: 2032, Q: 1440, H: 1120},
  12: {L: 2960, M: 2320, Q: 1648, H: 1264},
  13: {L: 3424, M: 2672, Q: 1952, H: 1440},
  14: {L: 3688, M: 2920, Q: 2088, H: 1576},
  15: {L: 4184, M: 3320, Q: 2360, H: 1784},
  16: {L: 4712, M: 3624, Q: 2600, H: 2024},
  17: {L: 5176, M: 4056, Q: 2936, H: 2264},
  18: {L: 5768, M: 4504, Q: 3176, H: 2504},
  19: {L: 6360, M: 5016, Q: 3560, H: 2728},
  20: {L: 6888, M: 5352, Q: 3880, H: 3080},
  21: {L: 7456, M: 5712, Q: 4096, H: 3248},
  22: {L: 8048, M: 6256, Q: 4544, H: 3536},
  23: {L: 8752, M: 6880, Q: 4912, H: 3712},
  24: {L: 9392, M: 7312, Q: 5312, H: 4112},
  25: {L: 10208, M: 8000, Q: 5744, H: 4304},
  26: {L: 10960, M: 8496, Q: 6032, H: 4768},
  27: {L: 11744, M: 9024, Q: 6464, H: 5024},
  28: {L: 12248, M: 9544, Q: 6968, H: 5288},
  29: {L: 13048, M: 10136, Q: 7288, H: 5608},
  30: {L: 13880, M: 10984, Q: 7880, H: 5960},
  31: {L: 14744, M: 11640, Q: 8264, H: 6344},
  32: {L: 15640, M: 12328, Q: 8920, H: 6760},
  33: {L: 16568, M: 13048, Q: 9368, H: 7208},
  34: {L: 17528, M: 13800, Q: 9848, H: 7688},
  35: {L: 18448, M: 14496, Q: 10288, H: 7888},
  36: {L: 19472, M: 15312, Q: 10832, H: 8432},
  37: {L: 20528, M: 15936, Q: 11408, H: 8768},
  38: {L: 21616, M: 16816, Q: 12016, H: 9136},
  39: {L: 22496, M: 17728, Q: 12656, H: 9776},
  40: {L: 23648, M: 18672, Q: 13328, H: 10208}
}

let versionOptions = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40])
let errorOptions = ["L", "M", "Q", "H"]

watch(() => qrCodeMakeArgs.content, () => {
  console.log("content")
})
watch(() => qrCodeMakeArgs.micro, (value, oldValue, onCleanup) => {
  if (value) {
    versionOptions.value = ["M3", "M4"]
  } else {
    versionOptions.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40]
  }
})

const generationQrCode = () => {
  postQrCode({'make': qrCodeMakeArgs, "kw": qrCodeKwArgs}).then(res => {
    qrCodeUrl.value = import.meta.env.VITE_APP_API + '/api/MakeQr/qrCode/' + res.data.id + '/'
    qrCodeId.value = res.data.id
  })
}

const source = ref('')
const {text, copy, copied, isSupported} = useClipboard({source})

const copyData = (data) => {
  if (isSupported.value) {
    copy(data).then(res => {
      ElMessage({
        message: '已复制',
        type: 'success',
      });
    })
  } else {
    ElMessage({
      message: '浏览器不支持复制',
      type: 'danger',
    });
  }
}

const handleCommand = (command) => {
  getQrCodeDownload(qs.stringify({id: qrCodeId.value, fileType: command})).then(res => {
    ElMessage({
      message: `正在下载 ${command} 格式二维码`,
      type: "success"
    });
    const fileName = `${qrCodeId.value}.${command}`
    let blob = new Blob([res], { type: "application/octet-stream;charset=utf-8" });
    let objectUrl = URL.createObjectURL(blob);
    const a = document.createElement('a')
    document.body.appendChild(a) // 此处增加了将创建的添加到body当中
    a.href = objectUrl
    a.download = fileName
    a.click()
    a.remove() // 将a标签移除

  })
}

</script>

<style scoped lang="scss">

</style>
